<template>
  <div class="up-popup">
    <up-overlay :show="show" @click.native.stop="clickOverlayClose">
      <div class="up-popup-content up-popup--bottom up-popup--round" :style="upStyle" @click.stop>
        <slot />
      </div>
    </up-overlay>
  </div>
</template>

<script>
import overlay from '@/components/common/overlay/overlay.vue'
export default {
  components: {
    'up-overlay': overlay
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    onClickOverlay: {
      type: Boolean,
      default: true
    },
    upStyle: {
      type: Object,
      default: () => {
        return {
          height: '30%'
        }
      }
    }
  },
  model: {
    event: 'changeShow'
  },
  methods: {
    onConfirm () {
      this.$emit('changeShow', false)
      this.$emit('onConfirm')
    },
    onCancel () {
      console.log('点击了取消')
      this.$emit('changeShow', false)
      this.$emit('onCancel')
    },
    clickOverlayClose () {
      if (!this.onClickOverlay) {
        return
      }
      this.onCancel()
    }
  }
}
</script>

<style lang="less">
@import url('./popup.less');
</style>
